<template>
  <div v-loading="downloadLoading" element-loading-text="拼命下载中，请稍后" class="container info-container">
    <el-row class="table-top">
      <div class="left">
        <el-select v-model="seachValue.device_category" placeholder="类别" style="width: 100%;margin-right: 10px" clearable @change="searchFun">
          <el-option v-for="item in DECVICECATEGORY" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="seachValue.device_status" placeholder="状态" style="width: 100%;margin-right: 10px" clearable @change="searchFun">
          <el-option v-for="item in DECVICESTATUS" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="seachValue.is_apply" placeholder="是否可申领" style="width: 100%;margin-right: 10px" clearable @change="searchFun">
          <el-option key="可申领" label="可申领" :value="0" />
          <el-option key="不可申领" label="不可申领" :value="1" />
        </el-select>
        <el-input v-model="seachValue.keyword" placeholder="搜索名称/标签/型号" style="width: 100%;margin-right: 10px" clearable @input="searchFun" />
        <el-button type="primary" @click="searchFun">搜索</el-button>
      </div>
      <div class="right">
        <el-button v-permission="['74002']" type="primary" class="margin-r-10" @click="Down"> 导出 </el-button>
      </div>
    </el-row>

    <el-table v-permission="['74001']" :data="tableData" style="width: 100%" :header-cell-style="{background:'#F7F8FA'}">
      <el-table-column prop="device_code" align="center" label="设备标签" />
      <el-table-column prop="device_category" align="center" label="设备分类" />
      <el-table-column prop="brand" align="center" label="品牌" />
      <el-table-column prop="device_name" width="250" align="center" label="设备名称" />
      <el-table-column prop="device_model" width="250" align="center" label="设备型号" />
      <el-table-column prop="device_status" align="center" label="设备状态">
        <template slot-scope="scope">
          <ProStatus :status="scope.row.device_status" />
        </template>
      </el-table-column>
      <el-table-column prop="cpu" width="150" align="center" label="CPU" />
      <el-table-column prop="gpu" width="150" align="center" label="GPU" />
      <el-table-column prop="mem" align="center" label="内存" />
      <el-table-column prop="volume" align="center" label="存储容量" />
      <el-table-column prop="os" align="center" label="操作系统" />
      <el-table-column prop="core" align="center" label="核数" />
      <el-table-column prop="version" align="center" label="版本" />
      <el-table-column prop="screen_size" align="center" label="屏幕尺寸" />
      <el-table-column prop="resolution" align="center" label="分辨率" />
      <el-table-column prop="mac_address_1" align="center" label="MAC地址1" />
      <el-table-column prop="mac_address_2" align="center" label="MAC地址2" />
      <el-table-column prop="retailer" align="center" label="零售商" />
      <el-table-column prop="purchase_price" align="center" label="购买价格" />
      <el-table-column prop="purchase_date" align="center" label="购买日期" />
      <el-table-column prop="warranty_period" align="center" label="保修期限" />
      <el-table-column prop="site" align="center" label="位置" />
      <el-table-column align="center" label="是否可以申领">
        <template slot-scope="scope">
          {{ scope.row.is_apply ? '不可申领' : '可申领' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="入库人">
        <template slot-scope="scope">
          {{ scope.row.device_apply ? scope.row.device_apply.ingoing_operator_name : '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="领用人">
        <template slot-scope="scope">
          {{ retName(scope.row.device_apply) || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="出库人">
        <template slot-scope="scope">
          {{ scope.row.device_apply ? scope.row.device_apply.outgoing_operator_name : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" align="center" label="备注" />
    </el-table>

    <div class="broadfun_block">
      <el-pagination
        :current-page="seachValue.pagenum"
        :page-sizes="[10, 20, 50]"
        :page-size="seachValue.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { DECVICECATEGORY, DECVICESTATUS, CHECKLIST } from '@/utils/const'
import { getDeviceList } from '@/api/property'
import { retDECVICESTATUS } from '@/utils/common'
import ProStatus from '@/components/Property/ProStatus'
import { parseTime } from '@/utils'
export default {
  name: 'PropertyInfo',
  components: {
    ProStatus
  },
  data() {
    return {
      downloadLoading: false,
      DECVICECATEGORY,
      DECVICESTATUS,
      checkList: [],
      tableData: [],
      total: 0,
      seachValue: {
        pagenum: 1,
        pagesize: 10,
        device_category: '',
        device_status: '',
        receive_name: '',
        keyword: '',
        is_apply: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const res = await getDeviceList(this.seachValue)
      if (res.ret === 0) {
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.tableData = []
        this.total = 0
      }
    },
    searchFun() {
      this.init()
    },
    handleSizeChange(val) {
      this.seachValue.pagenum = 1
      this.seachValue.pagesize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.seachValue.pagenum = val
      this.init()
    },
    async Down() {
      this.downloadLoading = true
      const seachValue = {
        pagenum: -1,
        pagesize: -1,
        device_category: '',
        device_status: '',
        receive_name: '',
        keyword: '',
        is_apply: ''
      }
      const res = await getDeviceList(seachValue)
      const tableData = res.data.list
      tableData.forEach(element => {
        element.device_status = retDECVICESTATUS(element.device_status)
        element.is_apply = element.is_apply ? '不可申领' : '可申领'
        element.outgoing_operator_name = element.device_apply ? element.device_apply.outgoing_operator_name : '-'
        element.e_name = element.device_apply ? element.device_apply.e_name : '-'
        element.ingoing_operator_name = element.device_apply ? element.device_apply.ingoing_operator_name : '-'
      })
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '设备标签',
          '设备分类',
          '品牌',
          '设备名称',
          '设备型号',
          '设备状态',
          'CPU',
          'GPU',
          '内存',
          '存储容量',
          '操作系统',
          '核数',
          '版本',
          '屏幕尺寸',
          '分辨率',
          'MAC地址1',
          'MAC地址2',
          '零售商',
          '购买价格',
          '购买日期',
          '保修期限',
          '位置',
          '是否可以申领',
          '入库人',
          '领用人',
          '出库人',
          '备注'
        ]
        const filterVal = [
          'device_code',
          'device_category',
          'brand', 'device_name',
          'device_model',
          'device_status',
          'cpu',
          'gpu',
          'mem',
          'volume',
          'os',
          'core',
          'version',
          'screen_size',
          'resolution',
          'mac_address_1',
          'mac_address_2',
          'retailer',
          'purchase_price',
          'purchase_date',
          'warranty_period',
          'site',
          'is_apply',
          'ingoing_operator_name',
          'e_name',
          'outgoing_operator_name',
          'remark'
        ]
        const list = tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '资产信息表',
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    retNum(num) {
      if (num && num.length) {
        return num.length
      } else {
        return 0
      }
    },
    retName(num) {
      if (num) {
        return num.e_name
      } else {
        return ''
      }
    },
    retPops(status) {
      const leave = CHECKLIST.find((item) => { return item.label === status })
      if (leave) {
        return leave.value || ''
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.info-container {
  background-color: white;
  padding-bottom: 50px;
}
</style>
